@import (reference) '~@/resources/assets/css/variable.less';

.theme(@primary-color,
  @node-stroke,
  @node-fill,
  @node-name,
  @ci-fill,
  @ci-name,
  @link-stroke,
  @anchor-color,
  @mask-color,
  @topo-bgcolor,
  @selected-stroke) {
  @node-removeIcon: @link-stroke;

  .topoGraph {
    .linktextbackground {
      flood-color: @topo-bgcolor;
    }

    .groupG {
      .select {
        stroke: @primary-color;
        fill: fade(@primary-color, 10%);
      }
      .shape {
        fill: transparent;
        stroke: @node-stroke;
      }
      .shape.active {
        stroke: fade(@primary-color, 50%) !important;
        stroke-width: 2px !important;
      }
      .removeBtn {
        fill: @node-removeIcon;
      }
      .resizer {
        fill: @primary-color;
        stroke: @primary-color;
      }
      .name {
        fill: @node-name;
      }
    }

    .nodeG {
      // 节点的基础样式
      .select {
        stroke: @primary-color;
        fill: fade(@primary-color, 10%);
      }

      .shape {
        fill: @node-fill;
        stroke: @node-name;
        stroke-opacity: 0.5;
      }

      .name {
        fill: @node-name;
      }

      .icon {
        fill: @node-name;
      }

      .removeBtn {
        fill: @node-removeIcon;
      }
    }

    .alignPath {
      stroke: @link-stroke;
    }

    .linkG {
      .name {
        fill: @node-name;
      }

      .linkPath {
        stroke: @link-stroke;
      }

      .linkRel {
        stroke: @primary-color;
      }

      .icon {
        fill: @link-stroke;
      }

      .maskPath {
        stroke: @mask-color;
      }
    }

    .linkArrow {
      path {
        fill: @link-stroke;
        stroke: @link-stroke;
      }

      circle {
        fill: @link-stroke;
        stroke: @link-stroke;
      }
    }
    .anchor {
      fill: @anchor-color;
      stroke: @primary-color;
    }

    .assistAnchor {
      fill: @primary-color;
    }
  }
}

html {
  .theme(@default-primary-color, @default-dividing, @default-blockbg, @default-text, @default-bg-grey, @default-title, @default-icon, @default-blockbg, @default-background, @default-op, @default-primary-color);

  &.theme-dark {
    .theme(@dark-primary-color, @dark-dividing, @dark-blockbg, @dark-text, @dark-bg-grey, @dark-title, @dark-icon, @dark-bg-grey, @dark-background, @default-invert-bg, @dark-primary-active-color);
  }
}
